M
MLOG
React Lazy Loading: Rozdelenie kódu komponentov pre optimalizovaný výkon | MLOG | MLOG ); } export default ImageGallery;

A komponent Image.js:


import React from 'react';

const Image = ({ src, alt }) => {
  return {alt};
};

export default Image;

V tomto príklade je každý obrázok obalený v komponente <Suspense>, takže pre každý obrázok sa počas načítavania zobrazí správa o načítaní. Tým sa zabráni blokovaniu celej stránky počas sťahovania obrázkov.

Pokročilé techniky a úvahy

1. Hranice chýb (Error Boundaries)

Pri používaní lazy loadingu je dôležité ošetriť potenciálne chyby, ktoré môžu nastať počas procesu načítavania. Na zachytenie týchto chýb a zobrazenie záložného UI je možné použiť hranice chýb. Komponent hranice chýb môžete vytvoriť takto:


import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Aktualizuj stav, aby nasledujúce vykreslenie zobrazilo záložné UI.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Chybu môžete tiež zaznamenať do služby na hlásenie chýb
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Môžete vykresliť akékoľvek vlastné záložné UI
      return 
Niečo sa pokazilo.
;
    }

    return this.props.children; 
  }
}

export default ErrorBoundary;

Potom obalte komponent <Suspense> komponentom <ErrorBoundary>:



  Načítava sa...}>

Ak nastane chyba pri načítavaní MyComponent, <ErrorBoundary> ju zachytí a zobrazí záložné UI.

2. Server-Side Rendering (SSR) a Lazy Loading

Lazy loading sa môže použiť aj v spojení so server-side rendering (SSR) na zlepšenie počiatočného času načítania vašej aplikácie. Vyžaduje si to však dodatočnú konfiguráciu. Budete musieť zabezpečiť, aby server správne spracoval dynamické importy a aby boli komponenty načítané pomocou lazy loadingu správne hydratované na strane klienta.

Nástroje ako Next.js a Gatsby.js poskytujú vstavanú podporu pre lazy loading a rozdelenie kódu v SSR prostrediach, čo tento proces značne uľahčuje.

3. Prednačítanie komponentov načítaných pomocou Lazy Loading

V niektorých prípadoch môžete chcieť prednačítať komponent načítaný pomocou lazy loadingu skôr, ako je skutočne potrebný. To môže byť užitočné pre komponenty, ktoré budú pravdepodobne čoskoro vykreslené, ako napríklad komponenty, ktoré sa nachádzajú pod viditeľnou časťou stránky, ale je pravdepodobné, že sa k nim používateľ posunie. Komponent môžete prednačítať manuálnym volaním funkcie import():


import('./MyComponent'); // Prednačítanie MyComponent

Tým sa začne načítavať komponent na pozadí, takže bude k dispozícii rýchlejšie, keď sa má skutočne vykresliť.

4. Dynamické importy s magickými komentármi Webpacku

„Magické komentáre“ Webpacku poskytujú spôsob, ako prispôsobiť názvy generovaných častí kódu. To môže byť užitočné pri ladení a analýze štruktúry balíčkov vašej aplikácie. Napríklad:


const MyComponent = React.lazy(() => import(/* webpackChunkName: "my-component" */ './MyComponent'));

Tým sa vytvorí časť kódu s názvom „my-component.js“ (alebo podobným) namiesto všeobecného názvu.

5. Ako sa vyhnúť bežným nástrahám

Príklady a prípady použitia z reálneho sveta

Lazy loading sa dá použiť v širokej škále scenárov na zlepšenie výkonu React aplikácií. Tu sú niektoré príklady:

Príklad: Medzinárodná e-commerce webstránka

Predstavte si e-commerce webstránku predávajúcu produkty po celom svete. Rôzne krajiny môžu mať rôzne meny, jazyky a katalógy produktov. Namiesto načítania všetkých dát pre každú krajinu vopred, môžete použiť lazy loading na načítanie dát špecifických pre lokalitu používateľa iba vtedy, keď navštívi stránku.


const CurrencyFormatter = React.lazy(() => import(`./CurrencyFormatter/${userCountry}`))
const ProductCatalog = React.lazy(() => import(`./ProductCatalog/${userCountry}`))

function ECommerceSite() {
  const userCountry = getUserCountry(); // Funkcia na zistenie krajiny používateľa

  return (
    Načítava sa obsah pre váš región...}>
      
      
    
  );
}

Záver

Lazy loading a rozdelenie kódu komponentov sú výkonné techniky na optimalizáciu výkonu React aplikácií. Načítaním komponentov iba vtedy, keď sú potrebné, môžete výrazne znížiť počiatočný čas načítania, zlepšiť používateľský zážitok a posilniť svoje SEO. Vstavané komponenty Reactu React.lazy() a <Suspense> uľahčujú implementáciu lazy loadingu vo vašich projektoch. Osvojte si tieto techniky na vytváranie rýchlejších, responzívnejších a pútavejších webových aplikácií pre globálne publikum.

Pri implementácii lazy loadingu vždy pamätajte na používateľskú skúsenosť. Poskytnite informatívne záložné UI, elegantne ošetrujte potenciálne chyby a starostlivo analyzujte výkon vašej aplikácie, aby ste sa uistili, že dosahujete požadované výsledky. Nebojte sa experimentovať s rôznymi prístupmi a nájsť najlepšie riešenie pre vaše špecifické potreby.